<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/logo-01.png" type="image/x-icon">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/jquery-ui.js"></script>
    <link rel="stylesheet" href="style/jquery-ui.css">
    <link rel="stylesheet" href="style/common.css">
    <link rel="stylesheet" href="style/ani.css">
    <link rel="stylesheet" href="style/main.css">
    <title>StarBattle</title>
</head>

<body>
    <div class="game-main">
        <div class="game-nav">
            <img src="images/logo-02.png" alt="StarBattle" class="game-logo">
            <div class="game-nav-main">
                <div class="game-nav-item">
                    <img src="images/oil.png" alt="oil">
                    <div id="light-progressbar">
                        <div id="light-progress-content"></div>
                    </div>
                </div>
                <div class="game-nav-item">
                    <img src="images/score.png" alt="score">
                    <div id="score">0</div>
                </div>
                <div class="game-nav-item">
                    <img src="images/time.png" alt="time">
                    <div id="count-down">000</div>
                </div>
            </div>
        </div>
        <div class="game-frame">
            <div id="game-explain">
                <p>How to Play Star Battle.</p>
                <p>1. Move the spaceship using the sensible areas in the screen;</p>
                <p>2. The timer present the time lapsed;</p>
                <p>3. The fuel counter show the remain fuel;</p>
                <p>4. During the flight, the spaceship needs to destroy the asteroids and enemy spaceships that are presented in the space;</p>
                <p>5. You can shoot pressing Space Bar;</p>
                <p>6. If the spaceship hits a asteroid or another spaceship, you lose 15 points of fuel;</p>
                <p>7. Enemy spaceship needs 1 shot to be destroyed, you will get 5 points for each enemy destroyed;</p>
                <p>8. Asteroid needs 2 shots to be destroyed, you will get 10 points for each asteroid destroyed;</p>
                <p>9. If you destroy a friendly spaceship, you lose 10 points;</p>
                <p>10. During the flight, the spaceship needs to collect fuel in the space;</p>
                <p>11. You can pause the game clicking in a button pause, or pressing the letter "p";</p>
                <p>12. Go beyond all limits;</p>
                <p>Battle in Space with Star Battle Championship...</p>
                <div class="game-start-btn game-btn">Start Game</div>
            </div>
            <div id="game-over">
                <input id="player-name" type="text">
                <div class="game-btn gameover-btn">Continue</div>
                <div id="rank">
                    <img src="images/logo-01.png" alt="logo">
                    <div class="rank-main">
                        <table>
                            <thead>
                                <tr>
                                    <td>poaition</td>
                                    <td>name</td>
                                    <td>time</td>
                                    <td>Aounce</td>
                                </tr>
                            </thead>
                            <tbody id="rank-content">

                            </tbody>
                        </table>
                    </div>
                    <div class="game-restart-btn game-btn">Start Game</div>
                </div>
            </div>
            <audio id="shoot-sound" src="sound/jiaosheng.mp3" preload="auto"></audio>
            <audio src="sound/destroyed.mp3" id="destroyed-sound" preload="auto"></audio>
        </div>
        <div class="game-control">
            <div class="sound-switch"><img src="images/sound-switch.png" alt="sound-switch"></div>
            <div class="game-control-main">
                <audio src="sound/bgm.mp3" id="bgm" loop preload="auto"></audio>
                <div id="pause" class="game-control-btn game-btn">PAUSE</div>
                <div class="game-control-btn game-btn">A+</div>
                <div class="game-control-btn game-btn">A-</div>
            </div>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>

</html>